<!--
 * @Author: ZAL 2177624751@qq.com
 * @Date: 2025-03-31 21:30:00
 * @LastEditors: ZAL 2177624751@qq.com
 * @LastEditTime: 2025-03-31 21:30:00
 * @Description: 积分页面
-->
<template>
  <view class="container">
    <!-- 积分卡片 -->
    <view class="points-card">
      <view class="points-header">
        <text class="title">我的积分</text>
        <text class="points">{{ points }}</text>
      </view>
      <view class="points-footer">
        <view class="footer-item">
          <text class="label">今日获得</text>
          <text class="value">+{{ todayPoints }}</text>
        </view>
        <view class="footer-item">
          <text class="label">本月获得</text>
          <text class="value">+{{ monthPoints }}</text>
        </view>
      </view>
    </view>

    <!-- 积分明细 -->
    <view class="points-detail">
      <view class="section-title">积分明细</view>
      <scroll-view 
        class="points-list" 
        scroll-y 
        @scrolltolower="loadMore"
        v-if="pointsList.length > 0"
      >
        <view 
          class="points-item" 
          v-for="item in pointsList" 
          :key="item.id"
        >
          <view class="item-left">
            <view class="points-info">
              <text class="title">{{ item.typeDesc }}</text>
              <text class="points" :class="{ 'points-plus': item.points > 0 }">
                {{ item.points > 0 ? '+' : '' }}{{ item.points }}
              </text>
            </view>
            <text class="expire-time" v-if="item.expireTime">
              {{ formatDate(item.expireTime) }}前有效
            </text>
          </view>
          <view class="item-right">
            <text class="time">{{ formatDate(item.createTime) }}</text>
            <text class="status" :class="{ 'status-valid': item.status === 0 }">
              {{ item.status === 0 ? '可使用' : '已使用' }}
            </text>
            <text class="source" v-if="item.sourceId">订单号: {{ item.sourceId }}</text>
          </view>
        </view>
      </scroll-view>
      <view v-else class="empty-state">
        <image src="/static/images/empty-points.png" mode="aspectFit" class="empty-image" />
        <text>暂无积分记录</text>
      </view>
    </view>

    <!-- 积分规则 -->
    <view class="points-rules">
      <view class="section-title">积分规则</view>
      <view class="rules-content">
        <view class="rule-item" v-for="(rule, index) in rules" :key="index">
          <text class="rule-title">{{ rule.title }}</text>
          <text class="rule-desc">{{ rule.desc }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { usePointsStore } from '/store/pointsStore'
import { onShow } from '@dcloudio/uni-app'

const pointsStore = usePointsStore()

const points = computed(() => pointsStore.getPointsOverview.totalPoints)
const todayPoints = computed(() => pointsStore.getPointsOverview.todayPoints || 0)
const monthPoints = computed(() => pointsStore.getPointsOverview.monthPoints || 0)
const pointsList = computed(() => pointsStore.getPointsRecords)

const rules = ref([
  {
    title: '购物积分',
    desc: '每消费1元可获得1积分'
  },
  {
    title: '积分有效期',
    desc: '积分有效期为1年，过期自动清零'
  },
  {
    title: '积分使用',
    desc: '100积分可抵扣1元，单次最多使用1000积分'
  }
])

// 格式化日期，只显示年月日
const formatDate = (dateStr) => {
  if (!dateStr) return '';
  const date = new Date(dateStr);
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
}

// 初始化数据
onMounted(async () => {
  try {
    await pointsStore.loadPointsOverview()
    await pointsStore.loadPointsRecords()
  } catch (error) {
    uni.showToast({
      title: '加载数据失败',
      icon: 'none'
    })
  }
})

// 加载更多
const loadMore = async () => {
  try {
    await pointsStore.loadPointsRecords()
  } catch (error) {
    uni.showToast({
      title: '加载数据失败',
      icon: 'none'
    })
  }
}

onShow(() => {
  pointsStore.initStore()
})
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding-bottom: env(safe-area-inset-bottom);
}

.points-card {
  margin: 20rpx;
  padding: 40rpx;
  background: linear-gradient(135deg, #00b578, #07c160);
  border-radius: 20rpx;
  color: #fff;

  .points-header {
    margin-bottom: 40rpx;

    .title {
      font-size: 28rpx;
      opacity: 0.9;
    }

    .points {
      display: block;
      font-size: 60rpx;
      font-weight: bold;
      margin-top: 20rpx;
    }
  }

  .points-footer {
    display: flex;
    justify-content: space-around;
    border-top: 1rpx solid rgba(255, 255, 255, 0.2);
    padding-top: 30rpx;

    .footer-item {
      text-align: center;

      .label {
        font-size: 24rpx;
        opacity: 0.9;
      }

      .value {
        display: block;
        font-size: 32rpx;
        font-weight: bold;
        margin-top: 10rpx;
      }
    }
  }
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin: 30rpx 20rpx 20rpx;
}

.points-detail {
  background-color: #fff;
  margin: 20rpx;
  border-radius: 12rpx;
  padding: 20rpx;

  .points-list {
    height: 400rpx;
  }

  .points-item {
    display: flex;
    justify-content: space-between;
    padding: 30rpx;
    background: #fff;
    border-radius: 12rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);

    .item-left {
      flex: 1;

      .points-info {
        display: flex;
        align-items: baseline;
        margin-bottom: 12rpx;

        .title {
          font-size: 32rpx;
          color: #333;
          margin-right: 16rpx;
        }

        .points {
          font-size: 40rpx;
          font-weight: bold;
          color: #ff4d4f;

          &.points-plus {
            color: #00b578;
          }
        }
      }

      .expire-time {
        font-size: 24rpx;
        color: #999;
      }
    }

    .item-right {
      text-align: right;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: space-between;

      .time {
        font-size: 24rpx;
        color: #999;
        margin-bottom: 8rpx;
      }

      .status {
        font-size: 24rpx;
        color: #ff4d4f;
        padding: 4rpx 12rpx;
        border-radius: 4rpx;
        background: rgba(255, 77, 79, 0.1);
        margin-bottom: 8rpx;

        &.status-valid {
          color: #00b578;
          background: rgba(0, 181, 120, 0.1);
        }
      }

      .source {
        font-size: 24rpx;
        color: #999;
      }
    }
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60rpx 0;

  .empty-image {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 20rpx;
  }

  text {
    font-size: 28rpx;
    color: #999;
  }
}

.points-rules {
  background-color: #fff;
  margin: 20rpx;
  border-radius: 12rpx;
  padding: 20rpx;

  .rules-content {
    .rule-item {
      margin-bottom: 30rpx;

      .rule-title {
        font-size: 28rpx;
        color: #333;
        font-weight: bold;
        margin-bottom: 10rpx;
        display: block;
      }

      .rule-desc {
        font-size: 24rpx;
        color: #666;
        line-height: 1.6;
      }
    }
  }
}
</style> 